<!--
  @文件名：tortoise
  @来源：Winford.Wang|2022/6/27 0027，14:13
  @描述：乌龟
-->
<template>
  <div class="tortoise" v-drag ref="tortoiseRefs">
  </div>
</template>

<script>

export default {
  name: 'tortoise',
  data () {
    return {}
  },
  created () {

  },
  mounted () {
this.moveDom()
  },
  activated () {

  },
  methods: {
    moveDom() {
      const dom = this.$refs.tortoiseRefs
      const _this = this
      if (this.timeInstall) clearInterval(this.timeInstall)
      this.timeInstall = setInterval(function () {
        const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const weight = dom.offsetLeft + dom.offsetWidth
        if (clientWidth > weight) {
          dom.style.left = (dom.offsetLeft + 1) + 'px'
        }
        else {
          if (_this.timeInstall) clearInterval(_this.timeInstall)
        }
      }, 100)
    }
  },
  deactivated () {

  },
  unmounted () {

  },
  components: {}
}
</script>

<style scoped lang='scss'>
.tortoise {
  position: absolute;
  bottom: 10px;
  left: 10px;
  pointer-events: auto;
  background-image: url("../../assets/pets/tortoise.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 80px;
  height: 50px;
  z-index: 1;
  cursor: grab;
}
</style>
